import React, {Component,Fragment} from 'react';
import './App.css';

const image00 = require("./img/pubuliu/10.jpg")
const image01 = require("./img/pubuliu/01.jpg")
const image02 = require("./img/pubuliu/02.jpg")
const image03 = require("./img/pubuliu/03.jpg")
const image04 = require("./img/pubuliu/04.jpg")
const image05 = require("./img/pubuliu/05.jpg")
const image06 = require("./img/pubuliu/06.jpg")
const image07 = require("./img/pubuliu/07.jpg")
const image08 = require("./img/pubuliu/08.jpg")
const image09 = require("./img/pubuliu/09.jpg")

class EachItem extends Component {
    render() {
        return(
            <div>
                <div className="leftItemContent" >
                </div>
            </div>)
    }
}


class App extends Component {

    state = {
        // 每个小组件的存放地
        componentList:[],
        // 图片资源列表
        imgList : [image00,image01,image02,image03,image04,image05,image06,image07,image08,image09],
        // count:1,
    };

    // 获取最小列的dom
    minDiv = ()=>{
        let item = document.getElementsByClassName("leftItemContent")
        let itemHeight = []
        for(let i=0; i<item.length; i++){
            let eachHeight = this.calcHeight(item[i].children)
            itemHeight.push(eachHeight)
        }
        let minIndex = 0
        let minValue = itemHeight[0]
        for(let j=0;j<itemHeight.length;j++){
            if(minValue>itemHeight[j]){
                minIndex = j;
                minValue = itemHeight[j];
            }
        }
        console.log("item[minIndex]",item[minIndex]);
        return item[minIndex]
    }
    // 计算每列的高度
    calcHeight = (domNode)=> {
        // console.log(domNode)
        if(domNode==null||domNode.length==0||domNode==undefined){
            return 0
        }
        let eachItemHeight = 0
        for(let i=0; i<domNode.length; i++){
            let imgNode = domNode[i].getElementsByClassName("wrapImage")[0].children
            eachItemHeight = eachItemHeight + imgNode[0].height+200
        }

        return eachItemHeight
    }

    // 向dom节点中插入图片
    insertImage = (mDiv,windowHeight,imgId,imgList)=>{
        let inter = setInterval(()=>{
            if(document.documentElement.scrollHeight>windowHeight){
                clearInterval(inter)
            }
            mDiv = this.minDiv()
            imgId++;
            if (imgId>=10){
                imgId = 0
            }
            let smallItemContent = document.createElement("div")
            let wrapImage = document.createElement("div")
            let wrapBottom = document.createElement("div")
            let worker = document.createElement("div")
            let readAndLove = document.createElement("div")
            let author = document.createElement("div")
            let $div1 = document.createElement("div")
            let $div2 = document.createElement("div")
            let bigimg = document.createElement("img")
            let userimg = document.createElement("img")
            smallItemContent.setAttribute("class","smallItemContent")
            wrapImage.setAttribute("class","wrapImage")
            wrapBottom.setAttribute("class","wrapBottom")
            worker.setAttribute("class","worker")
            readAndLove.setAttribute("class","readAndLove")
            author.setAttribute("class","author")

            bigimg.setAttribute("src",imgList[imgId])
            wrapImage.appendChild(bigimg)
            smallItemContent.appendChild(wrapImage)
            worker.append("火山将作品")
            wrapBottom.appendChild(worker)
            readAndLove.append("9&nbsp;2")
            wrapBottom.appendChild(readAndLove)
            userimg.setAttribute("src",imgList[imgId])
            author.appendChild(userimg)
            $div1.append("天狼")
            author.appendChild($div1)
            $div2.append("字体设计")
            author.appendChild($div2)
            wrapBottom.appendChild(author)
            smallItemContent.appendChild(wrapBottom)

            mDiv.appendChild(smallItemContent)
        },100)
    }

    componentDidMount() {
        this.responseType()
        window.onresize =  (e)=> {
            this.responseType()
        }
    }

    // 响应式设置
    responseType= ()=>{
        let clientWidth = document.body.clientWidth;
        let componentList = []
        if(clientWidth<480){
            componentList = new Array(1).fill(undefined).map(()=> <EachItem key={new Date().getTime()+Math.floor(Math.random()*1000)}/>)
        }else if(clientWidth<900){
            componentList = new Array(2).fill(undefined).map(()=> <EachItem key={new Date().getTime()+Math.floor(Math.random()*1000)}/>)
        }else if(clientWidth<1200){
            componentList = new Array(3).fill(undefined).map(()=> <EachItem key={new Date().getTime()+Math.floor(Math.random()*1000)}/>)
        }else {
            componentList = new Array(4).fill(undefined).map(()=> <EachItem key={new Date().getTime()+Math.floor(Math.random()*1000)}/>)
        }
        this.setState({
            componentList:componentList
        })
        let mDiv = null
        let windowHeight = window.screen.height+500
        let imgId = 0
        const {imgList} = this.state;
        setTimeout(()=>{
            this.insertImage(mDiv,windowHeight,imgId,imgList)
            //监听滚动事件
            window.document.addEventListener("scroll",()=> {
                // 一定要>=document.documentElement.scrollHeight否则不能滚到最后也不一定加载
                console.log("document.body.scrollTop",document.body.scrollTop);
                if (document.documentElement.scrollTop + window.screen.height >= document.documentElement.scrollHeight - 100 ||
                    document.body.scrollTop+ window.screen.height >= document.documentElement.scrollHeight - 100) {
                    windowHeight += 500
                    this.insertImage(mDiv,windowHeight,imgId,imgList)
                }
            })

        },100)
    }

    render() {

        const {componentList} = this.state;
        // console.log("componentList",componentList)
        return (
            <div>
                <div className="wrapBody">
                    <div className="leftContent">
                        {componentList}
                    </div>
                    <div className="rightContent">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>

            </div>
        );
    }
}

export default App;
